<template>
    <lay-container fluid="true" style="padding: 10px">
        <lay-row :space="10">
            <lay-col :md="24">
                <lay-card>
                    <div style="margin-top:20px;">
                        <lay-row>
                            <lay-col :md="24">
                                <div class="home-tips shadow" style="background:rgb(230, 230, 230);">
                                    <div class="home-tips-container" style="    height: auto;">
                                        <div class="demoTable">
                                            <div class="layui-inline" style="width:90%">
                                                <input class="layui-btn layui-btn-sm" type="text" v-model="pageconfig.search.title" placeholder="搜索" style="text-align: left;color: #009688; background-color: #fff;width:100%">
                                            </div>
                                            <button class="layui-btn layui-btn-sm" @click="a_search()">搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </lay-col>
                
                        </lay-row>
                    </div>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <lay-row :space="5">
                        <lay-col :md="6" v-for="(item,index) in pageconfig.data.data" :key="index">
                            <lay-card class="card-list-item">
                                <div v-if="item.biggic!=null&&item.biggic!=''">
                                    <div class="alone">
                                        <router-link :to="'/news/down?id='+item.id" :title="item.title">
                                            <img style="    height: 200px;" :src="item.biggic.split(',')[0]" :title="item.title"/>
                                        </router-link>
                                      
                         
                                    </div>
                             
                                </div>
                    
                                    <div style="   height: 42px;line-height: 42px;padding: 0 15px; border-top: 1px solid #f6f6f6;font-size: 14px; text-overflow: ellipsis ;white-space: nowrap;overflow: hidden;" >
                       
                                        {{item.title}}
                      
                                    </div>
                   
                         
                            </lay-card>
                        </lay-col>
                    </lay-row>
                    <lay-page @change="change"  v-model="pageconfig.page" :total="pageconfig.total" :limit="pageconfig.limit" :showPage="true">
                    </lay-page>
                </lay-card>
            </lay-col>
        </lay-row>
    </lay-container>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { layer } from "@layui/layer-vue";
import http from 'webosutils/lib/http';
const pageconfig=ref({
  limit:12,
  page:1,
  total:0,
  search:{
    title:""
  },
  data:{title:"",data:[] as any}
});
const ajax = () => {

http.post("/v1/api/portalsite/GetNew", {type:"B82AB160-7C17-4124-94FE-892F8B390DB8",title:pageconfig.value.search.title,  page: pageconfig.value.page, limit: pageconfig.value.limit },"请稍等").then(res => {

    pageconfig.value.total=res.count;
    pageconfig.value.data.data = Object.freeze( res.data);
   // pageconfig.value.data.title="免费ppt模板下载";
    var win=window as any;
    win.scrollTo(0,0)

}).catch(res => {

})



}
ajax();
const change=( page:any)=>{

  pageconfig.value.page=page.current;
  pageconfig.value.limit=page.limit;
  ajax();
}
const a_search=()=>{
  pageconfig.value.page=1;
  ajax();
}




</script>

<style scoped>
:deep(.card-list-item .layui-card-body img){
    width: 100%;
}

:deep(.card-list-item .layui-card-body){
    padding: 0px !important;
}

.button-list {

    display: flex;
}

.button-list > div {
    flex: 1;
    text-align: center;
    color: #909399;

}
.layui-card .layui-card-footer{
    height: 42px;line-height: 42px;padding: 0 15px; border-top: 1px solid #f6f6f6;font-size: 14px;
}
.alone {
    text-align: center;
    
  
    transition: all .3s;
    -webkit-transition: all .3s;
}
.alone a {
    display: block;
    padding: 5px 5px;
    color: #fff;
    font-size: 14px;
}
.alone:hover a{color:#fff!important;background-color:#316cba}
</style>
